// import { Editor } from "react-draft-wysiwyg";
// import { EditorState, convertToRaw, ContentState, RichUtils } from "draft-js";

// import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
// import "./index.less";
// import draftToHtml from "draftjs-to-html";
// import htmlToDraft from "html-to-draftjs";
// import { useCallback, useContext, useEffect, useRef, useState } from "react";
// import { Button, message, Popover, Space } from "antd";
// import { AppContext, isExternal } from "..";
// interface RichTextProps {
//   value?: string;
//   action?: string;
//   fileUploadData?: any;
//   disabled?: boolean;
//   onChange?: (html: string) => any;
// }
// const RichText = ({
//   disabled,
//   action,
//   value,
//   fileUploadData,
//   onChange,
// }: RichTextProps) => {
//   const { upload, commonHeaders, richText, apiPrefix } = useContext(AppContext);
//   const [open,setOpen] = useState(false)
//   const editorRef = useRef(null);
//   const [editorState, setEditorState] = useState<any>(EditorState.createEmpty());
//   useEffect(() => {
//     if (typeof value === "string") {
//       const contentBlock = htmlToDraft(value);
//       if (contentBlock) {
//         const contentState = ContentState.createFromBlockArray(
//           contentBlock.contentBlocks
//         );

//         const editorState = EditorState.createWithContent(contentState);

//         //   setEditorState(editorState)
//         // editorRef.current = editorState
//         setEditorState(editorState);
//         //   this.state = {
//         //     editorState,
//         //   }
//       }
//     }
//   }, [value]);
//   const onEditorStateChange = (v) => {
//     // debugger

//     // editorRef.current = v
//     // setEditorState(v)
//     // console.log(
//     //     'draftToHtml(convertToRaw(editorState.getCurrentContent()))',

//     // )
//     //   const html = draftToHtml(convertToRaw(editorState.getCurrentContent()))
//     onChange && onChange(editorState);
//     setEditorState(v);
//   };
//   const uploadImageCallBack = (file) => {
//     return new Promise((resolve, reject) => {
//       message.loading({ key: "uploadImageCallBack", content: "loading..." });
//       let formData = new FormData();
//       formData.append("file", file);
//       if (fileUploadData) {
//         Object.keys(fileUploadData).forEach((key) => {
//           formData.append(key, fileUploadData[key]);
//         });
//       }
//       if (!action) {
//         action = upload.action;
//       }
//       if (!isExternal(action)) {
//         action = apiPrefix + action;
//       }
//       fetch(action, {
//         method: "POST",
//         headers: {
//           ...commonHeaders,
//         },
//         body: formData,
//       })
//         .then((res) => {
//           return res.json();
//         })
//         .then((res) => {
//           if (res.code != 200) {
//             message.error("图片上传失败", 2);
//             reject(res);
//           } else {
//             if (richText) {
//               const { fileUrlResultFormat } = richText;
//               const url = fileUrlResultFormat(res);
//               resolve({ data: { link: url } });
//             }
//           }
//         })
//         .catch((err) => {
//           reject(err);
//         })
//         .finally(() => {
//           message.destroy("uploadImageCallBack");
//         });
//     });
//   };
 
//   const ImageComponent = (props) => {
//     const { block, contentState, blockProps } = props;
//     const entity = contentState.getEntity(block.getEntityAt(0));
//     const { src, alignment } = entity.getData();
//     const updateAlignment =(alignment) => {
//       const contentState = editorState.getCurrentContent();
//       const newContentState = contentState.mergeEntityData(block.getEntityAt(0), { alignment });
//       const newEditorState = EditorState.push(editorState, newContentState, 'apply-entity');
//       console.log('newEditorState',newEditorState)
//       setOpen(false)
//         // setEditorState(newEditorState);
//     }
   
//     console.log("entity.getData()", entity);
//     return (
//       <div style={{ textAlign: alignment }}>
//       <Popover 
//       open={open} title='xx' trigger='click' content={
//         <Space>
//            <Button onClick={() => updateAlignment('left')}>左</Button>
//               <Button onClick={() => updateAlignment('right')}>右</Button>
//         </Space>
//       }>

//           <img onClick={()=>setOpen(true)} src={src} alt="" style={{ maxWidth: "100%", height: "auto" }} />
//       </Popover>
             
         
//       </div>
//     );
//   };
//   const myBlockRenderer = (contentBlock) => {
//     const type = contentBlock.getType();
//     console.log("typetype", type);
//     if (type === "atomic") {
//       return {
//         component: ImageComponent,
//         editable: false,
//         props: {
//           editorState,
//           setEditorState
//         }
//       };
//     }
//     return null;
//   };
//   return (
//     <Editor
//       localization={{
//         locale: "zh",
//       }}
//       customBlockRenderFunc={myBlockRenderer}
//       readOnly={disabled}
//       editorState={editorState}
//       onEditorStateChange={onEditorStateChange}
//       toolbarClassName="toolbarClassName"
//       wrapperClassName="wrapperClassName"
//       editorClassName="rich-text-container"
//       toolbar={{
//         image: {
//           urlEnabled: true,
//           uploadEnabled: true,
//           alignmentEnabled: true, // 是否显示排列按钮 相当于text-align
//           uploadCallback: uploadImageCallBack,
//           previewImage: true,
//           inputAccept: "image/*",
//           defaultSize: {
//             height: "auto",
//             width: "100%",
//           },
//           alt: { present: false, mandatory: false, previewImage: true },
//         },
//       }}

//       // onEditorStateChange={this.onEditorStateChange}
//     />
//   );
// };
// export const richTextToHtml = (editorState) => {
//   if (typeof editorState === "string") {
//     return editorState;
//   }
//   if (typeof editorState === "undefined") {
//     return "";
//   }
//   return draftToHtml(convertToRaw(editorState.getCurrentContent()), null, true);
// };
// export default RichText;
